<template>
  <div style="padding: 10px">
    <div style="margin: 10px 0">
      <el-table  :data="tableData" stripe border style="width: 100%; table-layout:auto" >
        <el-table-column prop="num" label="柜号" sortable > </el-table-column>
        <el-table-column prop="code" label="取件码" > </el-table-column>
        <el-table-column prop="tel" label="朋友手机号"> </el-table-column>
        <el-table-column prop="intime" label="存件时间" > </el-table-column>
        <el-table-column >
          <template #default="scope">
            <el-button type="primary" @click="querycost(scope.row.code)">取件</el-button>
          </template>
        </el-table-column>


      </el-table>
    </div>

    <div style="margin: 10px 0" >
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>

      <el-dialog
          title="支付"
          v-model="dialogVisible"
          width="30%">
        <el-form  label-width="120px">
          <el-form-item label="需要支付的费用:">
           {{cost}}元
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="pay">支 付</el-button>
        </span>
        </template>
      </el-dialog>
    </div>

  </div>

</template>

<script>
import request from "@/utils/request";

export default {
  name: "queryFriendRequestNotake",
  components:{

  },
  data(){
    return {
      user: {},
      form:{},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize:10,
      total: 0,
      tableData: [],
      postage: 0,
      cost:0
    }
  },
  created(){
    let userStr = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(userStr)
    this.load()
  },
  methods: {
    load() {
      request.get("/friend/queryNoTake/"+this.user.tel, {
        params: {
          pageNum:this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log(res)
        this.tableData=res.data.records
        this.total=res.data.total
        this.load()
      })
    },

    querycost(code){
      request.get("/getexpress/querycost/"+code).then(res => {
        console.log(res)
        if(res.code === '0'){
          this.dialogVisible=true
          this.form={}
          this.form.code=code
        }else{
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    },

    pay(){
      request.get("/friend/delete/"+this.user.tel+"/"+this.form.code).then(res => {
        //then是一个链式操作
        console.log(res)
        if(res.code === '0'){
          this.$message({
            type: "success",
            message: "取件成功"
          })
          this.dialogVisible=false
        }else{
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    },

    // searched() {
    //   request.get("/sendexpress/querytakebyexpressman/"+this.user.tel, {
    //     params: {
    //       pageNum:this.currentPage,
    //       pageSize: this.pageSize,
    //       search: this.search
    //     }
    //
    //   }).then(res => {
    //     console.log(res)
    //     this.tableData=res.data.records
    //     this.total=res.data.total
    //   })
    // },

    handleSizeChange(pageSize) {   //改变当前每页的个数
      this.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {   //改变当前页数
      this.currentPage=pageNum
      this.load()
    }


  }


}
</script>

<style scoped>

</style>